<template>
  <div class="root">
    <acme-app-bar title="ActionSheet"></acme-app-bar>
    
    <div class="ui-title">基础用法</div>
    <acme-cell-group :radius="10" width="95%">
      <acme-cell title="基础用法" link @click="showPopup()" />
      <acme-cell title="禁用选项" link @click="showPopup('disabled')" />
      <acme-cell title="导航模式" link @click="showPopup('navigate')" />
      <acme-cell title="卡片模式" link @click="showPopup('card')" />
    </acme-cell-group>

    <acme-action-sheet 
      v-model="show" 
      :actions="actions" 
      :mode="sheetModl"
      @select="onSelect" 
    />
  </div>
</template>

<script>
  import AcmeCellGroup from "@/components/acme-design/cell-group"
  import AcmeCell from "@/components/acme-design/cell"
  import AcmeActionSheet from "@/components/acme-design/action-sheet"
  export default {
    components: {
      AcmeCellGroup,
      AcmeCell,
      AcmeActionSheet,
    },
    data() {
      return {
        show: false,
        actions: [
          { 
            name: "选项" 
          }, 
          {
            name: "选项" ,
            brief: '这是一段文字'
          }, 
          {
            name: "导航" 
          }, 
        ],
        sheetModl: ''
      };
    },
    methods: {
      showPopup(type) {
        // change mode
        this.sheetModl = type === 'card' ? type : ''
        
        // disabled
        this.$set(this.actions[0], 'disabled', type === 'disabled' ? true : false)
        
        // navigate mode
        if(type === 'navigate') {
          let path = '/pages/widget/popup/index'
          
          this.$set(this.actions[0], 'navigateTo', path)
          this.$set(this.actions[0], 'name', 'navigateTo')
          this.$set(this.actions[1], 'redirectTo', path)
          this.$set(this.actions[1], 'name', 'redirectTo')
          this.$set(this.actions[2], 'reLaunch', path)
          this.$set(this.actions[2], 'name', 'reLaunch')
        }else {
          this.$delete(this.actions[0], 'navigateTo')
          this.$set(this.actions[0], 'name', '选项')
          this.$delete(this.actions[1], 'redirectTo')
          this.$set(this.actions[1], 'name', '选项')
          this.$delete(this.actions[2], 'reLaunch')
          this.$set(this.actions[2], 'name', '选项')
        }
        
        this.show = !this.show
      },
      onSelect(e) {
        // console.log(e.item, e.index)
      }
    },
  };
</script>

<style lang="scss" scoped>
  .root {
    overflow: hidden;
  }
</style>